<template>
	<view class="container">
		<!-- 轮播图 -->
		<view class="swiper">
			<u-swiper :list="swiperList" indicator indicatorMode="dot" circular height="200"></u-swiper>
		</view>
		<!-- 选项卡 -->
		<u-sticky style="top: 0;" bgColor="#fff">
			<u-tabs :scrollable="false" lineWidth="60" :list="tabsList" @click="tabsMethods"></u-tabs>
		</u-sticky>
		<!-- 内容区域 -->
		<view class="content">
			<Content @isPhoneChange="isPhoneChange" :tabIndex="tabIndex"></Content>
		</view>
		<u-modal :show="isPhone" title="请先绑定手机号" showCancelButton @cancel="cancel" @confirm="confirm">
			<template v-slot="content">
				<u--form labelPosition="left" :model="params" :rules="rules" ref="uForm">
					<u-form-item prop="userName" borderBottom ref="uForm">
						<u--input v-model="params.userName" placeholder="用户名" border="none"></u--input>
					</u-form-item>
					<u-form-item label="+86" prop="phone" borderBottom ref="uForm">
						<u--input v-model="params.phone" placeholder="手机号码" border="none" maxlength='11'></u--input>
					</u-form-item>

				</u--form>
			</template>
		</u-modal>
	</view>
</template>

<script>
	import {
		addPhone,
		login,
		findPhone
	} from '@/api/api.js'
	import Content from '@/pages/content/index.vue'
	export default {
		components: {
			Content
		},
		data() {
			return {
				params: {
					phone: '',
					userName: '',
					accessToken: null,
				},
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '请输入正确的手机号',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					userName: [{
						required: true,
						message: '请填写用户名',
						trigger: ['change', 'blur'],
					}, ]
				},
				isPhone: false,
				// 选项卡index
				tabIndex: 0,
				swiperList: [
					'/static/homeImg/swiper/one.jpg',
					'/static/homeImg/swiper/two.jpg'
				],
				tabsList: [{
					name: '通知公告',
				}, {
					name: '公司动态',
				}, {
					name: '行业动态',
				}, ]
			}
		},
		methods: {
			/**
			 * tabsMethods：选项卡点击事件
			 * item:选项卡信息
			 */
			tabsMethods(item) {
				this.tabIndex = item.index
				console.log('tabIndex', this.tabIndex)
			},
			isPhoneChange(item) {
				console.log('homeIsPhone', item)
				this.isPhone = item
			},
			validateField(name, index) {
				console.log('index', index)
				this.current = index
			},
			// 取消
			cancel() {
				this.$refs.uForm.clearValidate()
				this.$refs.uForm.resetFields()
				this.isPhone = false
			},
			// 登录
			confirm() {
				let that = this
				this.$refs.uForm.validate().then(res => {
					uni.getStorage({
						key: 'accessToken',
						complete(res) {
							if (res.data) {
								that.params.accessToken = res.data.accessToken
								console.log('then', that.params)
								// 绑定手机号
								addPhone(that.params).then(res => {
									console.log('addPhone', res)
									if (res.data) {
										that.$store.commit('isPhone', false)
										if (res.data.user_role == '1') {
											this.$store.commit("isUser", true)
										} else {
											this.$store.commit("isUser", false)
										}
										that.isPhone = false
										uni.showModal({
											title: '绑定成功！'
										})
									} else {
										that.isPhone = false
										uni.showModal({
											title: '绑定失败！'
										})
									}

								})
							}
						}
					})

				}).catch(res => {
					console.log('catch', this.params)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background: #f4f4f5;
		display: inline-block;

		// 内容
		.content {
			width: 100%;
		}
	}
</style>